<template>
	<view class="bg">
		<view class="tabbar">
			<view class="tabbar-item" @click="switchTab(0)" :class="{ active: currentTab === 0 }">
				<image :src="'/static/tabbar/shouye.svg'" mode="aspectFit" class="tabbar-icon" v-show="currentTab!=0"></image>
				<image :src="'/static/tabbar/shouye2.svg'" mode="aspectFit" class="tabbar-icon" style="width: 45.86rpx;height: 45.86rpx;" v-show="currentTab==0"></image>
				<text class="tabbar-text m-t-2">{{ $t('tabbar.shouye') }}</text>
			</view>
			<view class="tabbar-item right-radius" @click="switchTab(1)" :class="{ active: currentTab === 1 }">
				<image :src="'/static/tabbar/hangqing.svg'" mode="aspectFit" class="tabbar-icon" v-show="currentTab!=1"></image>
				<image :src="'/static/tabbar/hangqing2.png'" mode="aspectFit" class="tabbar-icon" v-show="currentTab==1"></image>
				<text class="tabbar-text">{{ $t('tabbar.hangqing') }}</text>
			</view>
			<view class="tabbar-center" @click="switchTab(2)">
				<view class="tabbar-center-button">
					<view class="icon-box">
						<image :src="'/static/tabbar/icon5.svg'" mode="aspectFit" class="tabbar-center-icon"></image>
					</view>
				</view>
				<text class="tabbar-text">{{ $t('tabbar.lianghua') }}</text>
			</view>
			<view class="tabbar-item left-radius" @click="switchTab(3)" :class="{ active: currentTab === 3 }">
				<image :src="'/static/tabbar/chicang.svg'" mode="aspectFit" class="tabbar-icon" v-show="currentTab!=3"></image>
				<image :src="'/static/tabbar/chicang2.svg'" mode="aspectFit" class="tabbar-icon" v-show="currentTab==3"></image>
				<text class="tabbar-text">{{ $t('tabbar.chicang') }}</text>
			</view>
			<view class="tabbar-item" @click="switchTab(4)" :class="{ active: currentTab === 4 }">
				<image :src="'/static/tabbar/wode.svg'" mode="aspectFit" class="tabbar-icon" v-show="currentTab!=4"></image>
				<image :src="'/static/tabbar/wode2.svg'" mode="aspectFit" class="tabbar-icon" style="width: 46.86rpx;height: 46.86rpx;margin-top: -2rpx;"  v-show="currentTab==4"></image>
				<text class="tabbar-text m-t-2">{{ $t('tabbar.wode') }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			active:0,
			popupShow:false,
			tabPages: [
				'/pages/home/home',
				'/pages/market/market',
				'/pages/quantify/quantify',
				'/pages/position/position',
				'/pages/my/my'
			]
		}
	},
	props:{
		currentTab: {
		  type: Number,
		  default: 0
		}
	},
	beforeCreate() {
		uni.hideTabBar()
	},
	methods: {
		switchTab(index) {
			if (this.currentTab === index) return;
			uni.switchTab({
				url: this.tabPages[index]
			});
			
			// this.currentTab = index;
			
			// 通知父组件切换页面
			// this.$emit('tab-change', {
			// 	index: index,
			// 	path: this.tabPages[index]
			// });
			
			// 可以直接跳转页面，也可以由父组件控制
			
		}
	}
}
</script>

<style scoped lang="scss">
	.bg1{
		width: 239rpx;
		height: 276rpx;
		position: relative;
		top: -50rpx;
	}
	.bg2{
		width: 274rpx;
		height: 276rpx;
	}
	.bg-box{
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		display: flex;
		z-index: 99;
		flex-direction: column;
		align-items: flex-end;
	}
.bg{
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9;
	height: 120rpx;
	background-color: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(10.47rpx);
	padding-bottom: env(safe-area-inset-bottom);
	border-top-right-radius: 40rpx;
	border-top-left-radius: 40rpx;
}
.tabbar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 120rpx;
	display: flex;
	border-top-right-radius: 40rpx;
	border-top-left-radius: 40rpx;
	align-items: center;
	justify-content: space-around;
	padding-bottom: env(safe-area-inset-bottom);
	z-index: 999;
}

.tabbar-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.tabbar-icon {
	width: 41.86rpx;
	height: 41.86rpx;
	margin-bottom: 6rpx;
}

.tabbar-text {
	font-size: 24rpx;
	color: #666666;
}

.tabbar-item.active .tabbar-text {
	color: #3081EC;
}
.active .m-t-2{
	margin-top: -2rpx;
}

.tabbar-center {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 40rpx 40rpx 0 0 ;
	.tabbar-text{
		margin-top: 45rpx;
	}
}

.tabbar-center-button {
	position: absolute;
	top: -75rpx;
	box-sizing: border-box;
	height: 100%;
	width: 115.7rpx;
	height: 115.7rpx;
	border-radius: 50%;
	background-color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	.icon-box{
		width: 90.7rpx;
		height: 90.7rpx;
		border-radius: 50%;
		background: #3081EC;
		box-shadow: 1.74rpx 6.98rpx 17.44rpx  #97C3FC;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.tabbar-center-icon {
	width: 50rpx;
	height: 50rpx;
}
</style>